<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>排课信息</el-breadcrumb-item>
    </el-breadcrumb>
    <h3>排课设置列表</h3>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.teacherName" placeholder="教师名"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.courseName" placeholder="课程名"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="selectPage()">查询</el-button>
      <el-button type="success" @click="addInfoDialog=true">添加排课</el-button>
    </el-form>

    <!-- 工具条 -->
    <div>
      <el-button type="danger" size="mini" @click="deleteBatchIds()">批量删除</el-button>
    </div>

    <el-table
        :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" width="50" label="序号"/>
      <el-table-column prop="courseNumber" label="课程编号"/>
      <el-table-column prop="courseName" label="课程名称"/>
      <el-table-column prop="teacherName" label="教师姓名"/>
      <el-table-column prop="capacity" label="课程容量"/>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     icon="el-icon-edit" @click="showInfo(scope.row.id)">修改
          </el-button>
          <el-button type="danger" size="mini"
                     icon="el-icon-delete" @click="deleteById(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination
        :current-page="current"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="selectPage"/>

    <!--添加排课信息对话框-->
    <el-dialog title="添加排课信息" :visible.sync="addInfoDialog" @close="resetInfoDialog">
      <el-form :model="schedule" ref="schedule">
        <el-form-item label="教师姓名" :label-width="formLabelWidth" prop="teacherNumber">
          <el-input v-model="schedule.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="课程名" :label-width="formLabelWidth" prop="teacherNumber">
          <el-input v-model="schedule.courseName"></el-input>
        </el-form-item>
        <el-form-item label="课程容量" :label-width="formLabelWidth" prop="capacity">
          <el-input v-model="schedule.capacity"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetInfoDialog">取 消</el-button>
        <el-button type="primary" @click="insert()">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改排课信息对话框-->
    <el-dialog title="修改排课信息" :visible.sync="infoDialog" @close="resetInfoDialog">
      <el-form :model="schedule" ref="schedule">
        <el-form-item label="课程号" :label-width="formLabelWidth" prop="courseNumber">
          <el-input v-model="schedule.courseNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程名" :label-width="formLabelWidth" prop="courseNumber">
          <el-input v-model="schedule.courseName" disabled></el-input>
        </el-form-item>
        <el-form-item label="教师编号" :label-width="formLabelWidth" prop="teacherNumber">
          <el-input v-model="schedule.teacherNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="教师姓名" :label-width="formLabelWidth" prop="courseNumber">
          <el-input v-model="schedule.teacherName" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程容量" :label-width="formLabelWidth" prop="capacity">
          <el-input v-model="schedule.capacity"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetInfoDialog">取 消</el-button>
        <el-button type="primary" @click="updateById()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
//引入接口定义的js文件
import schedule from '@/api/schedule'

export default {
  //定义变量和初始值
  data() {
    return {
      current: 1, //当前页
      limit: 5, //每页显示记录数
      searchObj: {}, //查询指定教师排课
      list: [], //每页数据集合
      total: 0, //总记录数
      multipleSelection: [], // 批量选择中选择的记录列表
      infoDialog: false,//选课信息对话框
      addInfoDialog: false,
      formLabelWidth: '120px',
      schedule: {},
      selection: {}
    }
  },
  created() { //在页面渲染之前执行
    //一般调用methods定义的方法，得到数据
    this.selectPage()
  },
  methods: {//定义方法，进行请求接口调用
    //获取选择复选框的id值
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    //批量删除
    deleteBatchIds() {
      this.$confirm('此操作将永久删除排课信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //确定执行then方法
        var idList = []
        //遍历数组得到每个id值，设置到idList里面
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var obj = this.multipleSelection[i]
          var id = obj.id
          idList.push(id)
        }
        //调用接口
        schedule.removeByIds(idList)
            .then(response => {
              //提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              //刷新页面
              this.selectPage(1)
            })
      })
    },
    //排课信息列表
    selectPage(page = 1) { //添加当前页参数
      this.current = page
      schedule.selectPage(this.current, this.limit, this.searchObj)
          .then(response => { //请求成功response是接口返回数据
            //返回集合赋值list
            this.list = response.data.data.records
            //总记录数
            this.total = response.data.data.total
          })
          .catch(error => {//请求失败
            console.log(error)
          })
    },
    //删除排课的方法
    deleteById(id) {
      this.$confirm('此操作将永久删除排课信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //确定执行then方法
        //调用接口
        schedule.removeByIds([id])
            .then(response => {
              //提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              //刷新页面
              this.selectPage(1)
            })
      })
    },
    showInfo(id) {
      this.infoDialog = true
      //调用接口
      schedule.getById(id)
          .then(response => {
            this.schedule = response.data.data
          })
    },
    resetInfoDialog() {
      //重置信息框
      this.$refs['schedule'].resetFields()
      this.infoDialog = false
      this.addInfoDialog = false
      this.schedule = {}
    },
    updateById() {
      schedule.updateById(this.schedule)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.infoDialog = false
            this.schedule = {}
            //刷新页面
            this.selectPage(1)
          })
    },
    insert() {
      //调用接口
      schedule.add(this.schedule)
          .then(response => {
            if (response.data.code === "20000") {
              //提示
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.addInfoDialog = false
              this.schedule = {}
              //刷新页面
              this.selectPage(1)
            } else {
              this.common.errorReturn(this, response.data.message)
            }
          })
    }
  }
}
</script>
